<template>
  <div style="top: 10px">
<!--    上面轮播图 &#xe600;-->
    <div class="block" style="height: 300px;padding: 10px;border-radius: 30%;top: 10px">
      <el-carousel height="300px">
        <el-carousel-item v-for="item in datas" :key="item">
          <img :src="item" style="width: 100%;height:300px;border-radius: 10px">
          {{item}}
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="margin-left: 10px">
      <ul style="padding: 0;margin-left: 0">
        <li>
          <img src="../../assets/fonts/app/cuxiao.png" style="margin-left: 30px">
        </li>
        <li>
          <img src="../../assets/fonts/app/yinpin1.png" style="margin-left: 30px">
        </li>
        <li>
          <img src="../../assets/fonts/app/xihu.png" style="margin-left: 30px">
        </li>
        <li>
          <img src="../../assets/fonts/app/dianzi.png" style="margin-left: 30px">
        </li>
      </ul>
      <ul style="padding-left: 38px">
        <li style="margin-right: 46px">促销</li>
        <li style="margin-right: 46px">饮品</li>
        <li style="margin-right: 46px">洗护</li>
        <li style="margin-right: 46px">数码</li>
      </ul>
    </div>
    <div style="margin-top: 30px">
      <el-row :gutter="20">
        <el-col :span="5" :offset="1">
          <img src="../../assets/img/qun1.jpg" style="height: 110px;">
        </el-col>
        <el-col :span="17" :offset="1">
          <p style="margin: 0">2020夏季新款韩版宽松女碎花雪纺连衣裙V领显瘦阔腿连体短裤</p>
          <span style="font-size: 14px;color: #999999">大摆型 | 单件宽</span>
          <p style="margin: 0">
            <span style="font-size: 12px;color: #FF5000">¥</span>
            <span style="font-size: 20px;color: #FF5000">99</span>
            <span style="font-size: 14px;color: #999999">  20人付款</span>
          </p>
          <p style="margin: 0"><span style="font-size: 13px;color: #999999">韩建婵旗舰店</span><span style="font-size:14px">  广州 ></span></p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: 0,
      datas: [require('../../assets/img/lunbo1.jpg'), require('../../assets/img/lunbo.jpg'), require('../../assets/img/lunbo2.jpg'), require('../../assets/img/lunbo3.jpg')]
    }
  }
}
</script>
<style>
  .block {
    border-radius: 30%;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  ul{
    list-style:none;margin:0;
  }
  li{
    display:inline;
  }
</style>
